svg {
  background: #273747;
  font-family: monospace;
  font-size: 12px;
  line-height: 1.4;
}

.node rect {
  shape-rendering: crispEdges;
}

.edge path {
  stroke-width: 2px;
  fill: none;
}

.node text {
  fill: #fff;
}

.node.job text {
  font-weight: bold;
}

.node.constrained-input {
  opacity: 0.5;
}

.active path {
  stroke-width: 4px;
}

.active.node rect {
  filter: url(#embiggen);
}

.active.node text {
  font-size: 1.06em;
}

.node rect { fill: #1A252F; }

.edge { stroke: #5D6D7E; }

.node.job.no-builds rect { fill: #5D6D7E; }
.node.job.pending rect { fill: #BDC3C7; }
.node.job.succeeded rect { fill: #2ECC71; }
.node.job.failed rect { fill: #E74C3C; }
.node.job.errored rect { fill: #E67E22; }
.node.job.aborted rect { fill: #8F4B2D; }

.node.resource a { color: #e0e0e0; }

.node.input.failing rect { fill: #d28445; }

.edge.pending { stroke: #BDC3C7; }
.edge.succeeded { stroke: #2ECC71; }
.edge.failed { stroke: #E74C3C; }
.edge.errored { stroke: #E67E22; }
.edge.aborted { stroke: #8F4B2D; }

.job.node.started .animation {
  border-radius: 1px;
  -webkit-animation: started-ripples 1s linear infinite;
  animation: started-ripples 1s linear infinite;
}

@-webkit-keyframes started-ripples {
  0% {
    box-shadow: 0 0 0 -2px #202020, 0 0 0 0px #F1C40F, 0 0 0 2px #202020, 0 0 0 4px #F1C40F;
  }
  50% {
    box-shadow: 0 0 0 0px #202020, 0 0 0 2px #F1C40F, 0 0 0 4px #202020, 0 0 0 6px rgba(241, 196, 15, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px #202020, 0 0 0 4px #F1C40F, 0 0 0 6px #202020, 0 0 0 8px transparent;
  }
}

@keyframes started-ripples {
  0% {
    box-shadow: 0 0 0 -2px #202020, 0 0 0 0px #F1C40F, 0 0 0 2px #202020, 0 0 0 4px #F1C40F;
  }
  50% {
    box-shadow: 0 0 0 0px #202020, 0 0 0 2px #F1C40F, 0 0 0 4px #202020, 0 0 0 6px rgba(241, 196, 15, 0.5);
  }
  100% {
    box-shadow: 0 0 0 2px #202020, 0 0 0 4px #F1C40F, 0 0 0 6px #202020, 0 0 0 8px transparent;
  }
}
